<template>
  <div class="page-bg">
    <div class="top flex-column flex-middle">
      <div class="name flex-column flex-item">用户，你好！</div>
      <image mode="widthFix" style="width:70px;border-radius:50%;" 
        src="https://ws4.sinaimg.cn/large/006tNc79gy1g25p4f4q9ej3067068glf.jpg"></image>
    </div>

    <div class="lists flex-column flex-strech">
       <div class="flex-row item flex-center" v-for="(item,index) in cells" :key="index" @click="navigateTo(item.page)">
        <div style="height:70rpx;"><image mode="widthFix" :src="item.icon"></image></div>
        <div class="label">{{item.title}}</div>
      </div>
    </div>
  </div>
  <!-- <div style="padding:40px 10px;">
    <div class="top;">
      <image mode="widthFix" style="width:70px;border-radius:50%;" 
        src="https://ws3.sinaimg.cn/large/006tNbRwgy1fysgjwfbkrj30ev0h1abw.jpg"></image>
      <div v-if="isManager">商户</div>
      <div v-else>用户</div>
    </div>
    <div class="zan-panel">
      <div class="zan-cell zan-cell--access" v-for="(item,index) in cells" :key="index" @click="navigateTo(item.page)">
        <div class="zan-cell__bd">{{item.title}}</div>
        <div class="zan-cell__ft"></div>
      </div>
    </div>
  </div> -->
</template>

<script>
  export default {
    data() {
      return {
        cells: [
          {title: '地址管理',page: '/pages/mine/address/main',icon:'/static/icon-location.png'},
          {title: '订单管理',page: '/pages/mine/order/main',  icon:'/static/icon-order.png'},
        ],
        isManager: false,
        // key: value
      }
    },
    mounted() {
      if (this.$store.state.isManager) {
        this.isManager = true
        this.cells.push(...[{title: '蓝牙管理',page: '/pages/mine/bt/main'},
          {title: '店铺管理',page: '/pages/shop/main'},])
      }
    },
    methods: {
      navigateTo(url) {
        wx.navigateTo({url})
      }
    },
  }
</script>

<style lang="less" scoped>
.top {
  height:150px;
  background: linear-gradient(90deg,rgba(255,129,0,1) 0%,rgba(255,83,1,1) 100%);
  color: #fff;
  padding: 0 50px 50px 30px;
  font-size: 20px;
  width: calc(100vw - 80px);
  margin-top: -5px;
}
.top image {
  margin: 0 auto 10px;
}

.lists {
  width:calc(100vw - 20*2px - 20*2px);
  margin: -50px auto 0;
  padding: 0 20px;
  min-height:107px;
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 10px 0px rgba(243,243,243,1);
  border-radius:15px;
  .item {
    text-align: center;
    width: 80px;
    padding: 20px 0 25px;
    image {
      width: 31px;
      max-height: 40px;
    }
    .label {
      color: #333333;
      font-size: 13px;
      margin-top: 10px;
    }
  }
}
</style>